Google Analytics を使って、NuxtJS アプリの例外を測定してみた
はじめに
プロフィールビューアーサービス Proflly（プロフリー）の運用にて、エラーが発生している原因を調査することがあります。その際に再現性があるエラーの場合は、原因を突き止めやすいのですが、再現性がないエラーの場合、調査して原因を突き止めるのが難しい場合があります。 そういった場合に、クライアント側のエラー(Javascript のエラーなど)をモニタリングできると、エラー時の挙動がより調査しやすくなるので、今回は Google Analytics の gtag.js を使って例外情報を測定してみました。
なお、CloudWatch RUM を使ってクライアントエラーのモニタリングについても以前ブログに書いてあるので、気になる方は、読んでいただけると嬉しいです。
事前条件
- Google アカウント、GA4 プロパティおよびデータストリームを設定済みである
やってみること
- NuxtJS アプリ(Single Page Application)に Google Analytics 測定タグをセットアップ
- NuxtJS アプリ(Single Page Application)に例外の測定を組み込む
- NuxtJS アプリでエラー（例外）を発生させる
- エラー内容を Google Analytics から確認する
実行環境
- Node.js:
14.17.1 - NuxtJS:
2.15.8 - @nuxtjs/google-gtag:
1.0.4
NuxtJS アプリ(Single Page Application)に Google Analytics 測定タグをセットアップ
Google Analytics の測定に利用するタグは、プロパティとデータストリームを作成することで、Google Analytics のコンソール上で確認することができます。
このタグをそのまま Web サイトに組み込んでもよいのですが、NuxtJS の場合だと、@nuxtjs/google-gtag という便利なライブラリがあるので、今回はこちらを利用して組み込みます。 アプリケーションにインストールして、設定ファイルをセットアップします。なお、下記の設定内容についてはあくまでサンプルであり、稼働している環境やアプリケーションに合わせて、調整する必要があります。
export default {
...
modules: [
[
'@nuxtjs/google-gtag',
{
id: '[測定用のID(ex: G-xxxxyyyy)]',
config: {
send_page_view: false,
},
debug: true,
},
],
],
...
}
NuxtJS アプリ(Single Page Application)に例外の測定を組み込む
Google Analytics の測定用のタグを組み込んだだけだと、例外の測定はされません。 例外の測定をするには、アプリケーションでエラーが発生した際に、Google Analytics にエラー情報をイベントとして送る必要があります。 NuxtJS に組み込む場合は、エラーハンドラを作成してエラー情報を送る方法がやりやすそうなので、エラー情報を送るエラーハンドラをプラグインを使って組み込んでみました。
import Vue from 'vue'
export default (context: any, inject: any) => {
Vue.config.errorHandler = (err, vm, info) => {
context.$gtag('event', 'exception', { description: err.message })
console.error(err)
// エラーハンドリング
}
}
export default {
...
plugins: [
{src: '~/plugins/error-handler'}
],
...
}
エラー内容を Google Analytics から確認する
今回はローカル環境で例外を発生させてみました。なお、dev モードで起動（例: yarn dev, npm run dev）した際に、Google Analytics の収集を有効にしたい場合は、上記の nuxt.config.js で、debug を true に設定して実行することで、収集の確認をすることができます。
収集したエラー内容を Google Analytics のコンソールで [レポート] → [リアルタイム] のイベントで確認すると、例外情報が送られていることを確認できました。
どのようなエラーがいつ、何度発生したのか？を、可視化することができそうです。
さいごに
データの分析や収集に Google Analytics を使っている Web サイトも多いかと思います。既に使っている場合は、エラーの収集も比較的簡単に組み込めそうですので、エラーの可視化に使ってみてはいかがでしょうか。 いろいろなクライアントエラーの収集方法がある中の、手段の１つとして、どなたかの参考になれば幸いです。
